<template>
    <div class="message-container">
        <div class="message-header">
            <h2>留言板</h2>
        </div>

        <!-- 留言表单 -->
        <el-card class="message-form">
            <el-form :model="messageForm" :rules="rules" ref="messageForm">
                <el-form-item prop="content">
                    <el-input type="textarea" v-model="messageForm.content" :rows="4"
                        placeholder="请输入您的留言内容..."></el-input>
                </el-form-item>
                <el-form-item>
                    <div style="text-align: right;">
                        <el-button type="primary" @click="submitMessage" :disabled="!isLogin">发表留言</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </el-card>

        <!-- 留言列表 -->
        <div class="message-list">
            <el-card v-for="(message, index) in messageList" :key="index" class="message-item">
                <div class="message-user">
                    <el-avatar :size="40" :src="message.avatar"></el-avatar>
                    <span class="username">{{ message.userName }}</span>
                </div>
                <div class="message-content">{{ message.content }}</div>
                <div class="message-footer">
                    <span class="message-time">{{ message.createTime }}</span>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
import { getMessageList, submitMessage } from '@/api';
export default {
    name: 'Message',
    data() {
        return {
            messageForm: {
                content: ''
            },
            rules: {
                content: [
                    { required: true, message: '请输入留言内容', trigger: 'blur' },
                    { min: 1, max: 500, message: '留言长度在 1 到 500 个字符', trigger: 'blur' }
                ]
            },
            messageList: [],
            isLogin: false,
        }
    },
    mounted() {
        this.isLogin = localStorage.getItem('userInfo') != null ? true : false
        this.reqMessageList()
    },
    methods: {
        reqMessageList() {
            getMessageList().then(res => {
                this.messageList = res.rows
            })
        },
        submitMessage() {
            this.$refs.messageForm.validate((valid) => {
                if (valid) {
                    // 这里添加提交留言的逻辑
                    submitMessage(this.messageForm).then(res => {
                        this.$message.success('留言发表成功！')
                        this.messageForm.content = ''
                        this.reqMessageList()
                    })
                }
            })
        },
        handleReply(message) {
            // 处理回复逻辑
            this.$message.info('回复功能开发中...')
        },
        handleLike(message) {
            // 处理点赞逻辑
            message.likes++
            this.$message.success('点赞成功！')
        }
    }
}
</script>

<style scoped>
.message-container {
    padding: 20px;
}

.message-header {
    margin-bottom: 20px;
    text-align: center;
}

.message-form {
    margin-bottom: 30px;
}

.message-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.message-item {
    transition: all 0.3s;
}

.message-user {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.username {
    margin-left: 10px;
    font-weight: bold;
}

.message-content {
    color: #333;
    margin: 10px 0;
    line-height: 1.6;
}

.message-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #999;
    font-size: 14px;
}

.message-actions {
    display: flex;
    gap: 10px;
}
</style>